<template>
  <view>
    <!-- 头部区域 -->
    <view class="header" v-if="itemMusicList.id">
      <image class="background" :src="itemMusicList.coverImgUrl" mode="aspectFill"></image>
      <image class="cover" :src="itemMusicList.coverImgUrl"></image>
      <view class="listInfo">
        <text class="title">{{itemMusicList.name}}</text>
        <view class="creator">
          <image class="creatorAvatar" :src="itemMusicList.creator.avatarUrl"></image>
          <text class="creatorName">{{itemMusicList.creator.nickname}}</text>
          <uni-icons type="right" color="white" size="15"></uni-icons>
        </view>
        <text class="desc">{{itemMusicList.description==null?'':itemMusicList.description}}</text>
      </view>
      <!-- icon -->
      <view class="icon">
        <view class="iconTitle">
          <uni-icons type="chat" color="white" size="35"></uni-icons>
          <text>{{itemMusicList.commentCount}}</text>
        </view>
        <view class="iconTitle">
          <uni-icons type="undo" color="white" size="35"></uni-icons>
          <text>{{itemMusicList.shareCount}}</text>
        </view>
        <view class="iconTitle">
          <uni-icons type="download" color="white" size="35"></uni-icons>
          <text>下载</text>
        </view>
        <view class="iconTitle">
          <uni-icons type="folder-add" color="white" size="35"></uni-icons>
          <text>收藏</text>
        </view>
      </view>
    </view>
    <!-- 底部列表 -->
    <item-SongListButtom></item-SongListButtom>
  </view>
</template>

<script>
  import {
    mapMutations,
    mapState
  } from 'vuex'
  export default {
    name: "item-SongList",
    computed: {
      // 调用 mapState 辅助方法，把 m_user 模块中的数据映射到当前用组件中使用
      ...mapState('musicDetailList', ['itemMusicList']),
    },
    data() {
      return {

      };
    }
  }
</script>

<style>
  text {

    text-overflow: ellipsis;
    white-space: nowrap;
    color: white;
    font-size: 25rpx;
  }

  .icon {
    display: flex;
    justify-content: space-between;
    position: absolute;
    right: 5rpx;
    top: 250rpx;
    margin-bottom: 8rpx;

  }

  .icon .iconTitle {
    display: flex;
    flex-direction: column;
    opacity: 0.8;
    margin: 0 60rpx 0;
    align-items: center;

  }

  .header {
    box-sizing: border-box;
    height: 35vh;
    width: 100%;
    display: flex;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 20rpx;
    position: relative;
    overflow: hidden;
  }

  .background {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -100;
    width: 100%;
    height: 750rpx;
    filter: blur(30px);
  }

  .cover {
    width: 200rpx;
    height: 200rpx;
    border-radius: 20rpx;
    box-shadow: 0rpx -27rpx 5rpx -14rpx rgba(218, 218, 218, 0.2);
  }


  .listInfo {
    width: 50vw;
    display: flex;
    height: 15vh;
    flex-direction: column;
    margin-left: 40rpx;
    justify-content: space-between;
    position: relative;
  }


  .title {
    font-size: 30rpx;
    color: white;
    opacity: 0.8;
  }

  .creator {
    display: flex;
    align-items: center;
    position: absolute;
    top: 40%;
  }

  .creatorAvatar {
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
  }


  .creatorName {
    margin-left: 20rpx;
    color: white;
    opacity: 0.5;
    font-size: 24rpx;
  }

  uni-icons {
    opacity: 0.5;
    padding-top: 3rpx;
  }

  .desc {
    color: white;
    opacity: 0.5;
    font-size: 24rpx;
    height: 35rpx;
    overflow: hidden;
  }
</style>
